import React, { Component } from "react";
import PageHeader from "../components/PageHeader";
import Bg from "../components/Bg";
import "../assets/css/SafetyCenter.css";
import Popup from "../components/Popup";
import Phone from "../components/Phone";
import login from "../hooks/loginInfo";
import { errorToast, successToast } from "../components/Toast";
import { Redirect } from "react-router-dom";
import Alert from "../components/Alert";

class SafetyCenter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      changePassword: false,
      oldPassword: "",
      newPassword: "",
      isLogin: null,
      token: null,
      alert: false,
      logOutAlert:false
    };
    this.toggleChangePassword = this.toggleChangePassword.bind(this);
    this.ChangeOldPassword = this.ChangeOldPassword.bind(this);
    this.ChangeNewPassword = this.ChangeNewPassword.bind(this);
    this.ChangePassword = this.ChangePassword.bind(this);
    this.affirm = this.affirm.bind(this);
    this.toggleAlert = this.toggleAlert.bind(this);
    this.toggleLogOut = this.toggleLogOut.bind(this);
    this.logOut = this.logOut.bind(this);
  }

  componentWillMount() {
    var loginInfo = login();
    this.setState({
      isLogin: loginInfo.isLogin,
      token: loginInfo.token,
    });
  }
  toggleLogOut(){
    this.setState({
      logOutAlert: !this.state.logOutAlert,
    });
  }
  toggleChangePassword() {
    this.setState({
      changePassword: !this.state.changePassword,
    });
  }
  ChangeOldPassword(e) {
    this.setState({
      oldPassword: e.target.value,
    });
  }
  ChangeNewPassword(e) {
    this.setState({
      newPassword: e.target.value,
    });
  }
  ChangePassword() {
    if (this.state.newPassword !== "" && this.state.oldPassword !== "") {
      var firstChar = this.state.newPassword[0].toLowerCase();
      if (
        this.state.newPassword.length >= 6 &&
        this.state.newPassword.length <= 16 &&
        firstChar <= "z" &&
        firstChar >= "a"
      ) {
        this.$axios
          .post("/updatePassword", {
            tokenString: login().token,
            password: this.state.newPassword,
            oldPassword: this.state.oldPassword,
          })
          .then((res) => {
            if (res.data.code === "E001") {
              successToast("修改成功,请重新登录！");
              this.props.history.push("/login");
              localStorage.removeItem("loginInfo");
            } else {
              errorToast(res.data.msg);
            }
          });
      } else {
        errorToast("密码长度6-16位且以字母开头");
      }
    } else {
      errorToast("请填写完整信息！");
    }
  }
  toggleAlert() {
    this.setState({
      alert: !this.state.alert,
    });
  }
  affirm() {
    this.$axios
      .post("/destroyAccount", {
        tokenString: this.state.token,
      })
      .then((res) => {
        successToast(res.data.msg);
        localStorage.removeItem("loginInfo");
        this.props.history.push("/");
      });
  }
  logOut(){
    this.$axios.post("/logout",{
      tokenString:this.state.token
    }).then(res=>{
      console.log(res);
      successToast(res.data.msg);
        this.props.history.push("/");
        localStorage.removeItem("loginInfo");
    })
  }

  render() {
    return this.state.isLogin ? (
      <div className="safetyCenter">
        <PageHeader>
          <span slot="title">安全中心</span>
        </PageHeader>
        <Bg>
          <li onClick={this.toggleChangePassword}>
            <span>修改密码</span>
            <i></i>
          </li>
          <li onClick={this.toggleAlert}>
            <span>注销账号</span>
            <i></i>
          </li>
        </Bg>
        <button className="logOut" onClick={this.toggleLogOut}>退出登录</button>

      {this.state.logOutAlert && (
          <Alert cancel={this.toggleLogOut} affirm={this.logOut}>
          <span slot="title">退出登录</span>
          <span slot="content">是否确认退出登录！</span>
        </Alert>
      )}

        {this.state.alert && (
          <Alert cancel={this.toggleAlert} affirm={this.affirm}>
            <span slot="title">注销账号</span>
            <span slot="content">是否确认注销账号，一旦确认无法恢复！</span>
          </Alert>
        )}

        {this.state.changePassword && (
          <Popup closePopup={this.toggleChangePassword}>
            <div className="popup_title">修改密码</div>
            <div className="changePassword_form">
              <Phone
                eye="true"
                title="旧密码"
                placeholder="请输入密码"
                ChangePhone={this.ChangeOldPassword}
              ></Phone>
              <Phone
                eye="true"
                title="新密码"
                placeholder="6-16位密码且以字母开头"
                ChangePhone={this.ChangeNewPassword}
              ></Phone>
              <button
                className="changePassword_btn"
                onClick={this.ChangePassword}
              >
                修改密码
              </button>
            </div>
          </Popup>
        )}
      </div>
    ) : (
      <Redirect to="/login"></Redirect>
    );
  }
}

export default SafetyCenter;
